<template>
    <div class="person">
        <h1>情况一：监视【ref】定义的 【基本类型】数据</h1>
        <h2>当前求和为：{{sum}}</h2>
        <button @click="sum++">点我求和加一</button>
        <hr>
        <h1>情况二：监视【ref】定义的 【对象类型】数据</h1>
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{person.age}}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
        <hr>
        <h1>情况三：监视【reactive】定义的 【对象类型】数据</h1>
        <h2>姓名：{{ p.name }}</h2>
        <h2>年龄：{{p.age}}</h2>
        <button @click="pName">修改名字</button>
        <button @click="pAge">修改年龄</button>
        <button @click="pPerson">修改整个人</button>
        <hr>
        <h1>情况四：监视响应式对象中的某个属性</h1>
        <h2>姓名：{{p2.name}}</h2>
        <h2>年龄：{{p2.age}}</h2>
        <h2>汽车：{{p2.car.c1}}、{{p2.car.c2}}</h2>
        <button @click="p2.name+='~'">修改名字</button>
        <button @click="p2.age+=1">修改年龄</button>
        <button @click="p2.car.c1+='!'">修改第一台车</button>
        <button @click="p2.car.c2+='*'">修改第一台车</button>
        <button @click="p2Car">修改整个车</button>
        <hr>
        <h1>情况五：监视多个数据</h1>
        <p>完结！！！！！！！！！！</p>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {ref,watch,reactive} from "vue"

    // 情况一：监视【ref】定义的 【基本类型】数据
    let sum=ref(0);
    const stopWatch=watch(sum,(newVal,oldVal)=>{
        console.log(newVal,oldVal);
        //这个watch还返回一个函数，调用它可以解除监视！！！
        if(newVal>10){
            stopWatch();
        }
    })
    // console.log(stopWatch);//返回一个函数
    /* 
    () => {
    effect2.stop();
    if (instance && instance.scope) {
      remove(instance.scope.effects, effect2);
    }
  }
    */
    
// -----------------------------------------------
  let person=ref({
    name:"张三",
    age:18
  })
  const changeName=()=>{
    person.value.name+="~"
  }
  const changeAge=()=>{
    person.value.age+=1
  }
  const changePerson=()=>{
    person.value={name:"李明",age:20};
  }
  //监视【ref】定义的 【对象类型】数据，监视的是对象的地址值，
 // 若想监视对象内部的属性变化，需要手动开启深度监视。
  watch(person,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
  },{deep:true})

// ------------------------------------------------
  let p=reactive({
    name:'小雨',
    age:20
  })
  const pName=()=>{
    p.name+="~"
  }
  const pAge=()=>{
    p.age+=1
  }
  const pPerson=()=>{
    //这里不是真正意义上的修改整个人，而是进行了批量的修改！！！
   Object.assign(p,{name:"小柔",age:19})
  }

//监视【reactive】定义的 【对象类型】数据,默认开启了深度监视!!!
  watch(p,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
  })

//   --------------------------------------------------
let p2=reactive({
    name:'xiaoyu',
    age:18,
    car:{
        c1:'奔驰',
        c2:'宝马'
    }
})
const p2Car=()=>{
    p2.car={c1:"大奔驰",c2:"大宝马"}
}
//情况四：监视响应式对象中的某个属性，且该属性是基本数据类型，要写成函数式。
watch(()=>p2.name,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
})
//下面这个情况就很诡异，能监视到对象里面的值变化，对象本身却不进行监视！
// watch(p2.car,(newVal,oldVal)=>{
//     console.log(newVal,oldVal);
// })

//建议写成监视其中的属性任然是一个对象类型的，也推荐使用函数形式的！
watch(()=>p2.car,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
},{deep:true})

// ------------------------------------------
// 情况五：监视多个数据：
watch([()=>p2.name,()=>p2.car.c1],(newVal,oldVal)=>{
    console.log(newVal,oldVal);
})

</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
li{
    font-size: 20px;
}
button{
    margin: 0 10px;
}
</style>